<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>培训视频管理</title>
    <!--vue-->
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入组件库 -->
    <script src="/js/index.js"></script>
    <!--axios-->
    <script src="/js/axios.min.js"></script>
</head>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<body>
<div id="app">
    <el-row>
        <el-col :span="4"><el-input v-model="coursename"   size="mini" placeholder="课程名称"></el-input></el-col>
        <el-col :span="4"><el-button type="primary" size="mini" @click="search()" icon="el-icon-search">搜索</el-button></el-col>
        <el-col :span="12">&nbsp;</el-col>
        <el-col :span="2"><el-button type="primary" size="small" round @click="toEdit()" icon="el-icon-circle-plus">添加</el-button></el-col>
        <el-col :span="2"><el-button type="primary" size="mini" @click="flush()" icon="el-icon-search">刷新</el-button></el-col>

    </el-row>
    <el-row>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="videoid"
                    label="视频ID">
            </el-table-column>
            <el-table-column
                    prop="videoname"
                    label="视频姓名">
            </el-table-column>
            <el-table-column
                    prop="addtime"
                    label="上传时间">
            </el-table-column>
            <el-table-column
                    prop="intro"
                    label="描述">
            </el-table-column>
            <el-table-column
                    label="视频截图"
                    width="180">
                <template slot-scope="scope">
                    <el-image
                            style="width: 50px; height: 50px"
                            :src="scope.row.sshotpath"></el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="coursename"
                    label="所教课程">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            type="primary" size="small" round
                            @click="toEdit(scope.row.videoid)"class="el-icon-edit">编辑</el-button>
                    <el-button
                            size="small" round
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"class="el-icon-delete"> 删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <el-row>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </el-row>



    <el-row>
        <!--更新弹出框-->
        <el-dialog title="编辑" :visible.sync="editFormVisible">
            <el-form :model="form" ref="form"  :rules="rules">
                <el-form-item v-if="show" label="视频id" :label-width="formLabelWidth">
                    <el-input v-model="form.videoid" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="视频名称" :label-width="formLabelWidth" prop="videoname">
                    <el-input v-model="form.videoname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="视频描述" :label-width="formLabelWidth" prop="intro">
                    <el-input v-model="form.intro" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="选择截图" :label-width="formLabelWidth">
                    <!--图片上传-->
                    <el-upload
                            class="avatar-uploader"
                            action="/commonOSS/upload"
                            name="file"
                            :auto-upload="true"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-image v-if="(form.sshotpath==''||form.sshotpath==null)?false:true"
                              style="width: 100px; height: 100px"
                              :src="form.sshotpath">
                    </el-image>
                </el-form-item>
                <el-form-item label="选择视频" :label-width="formLabelWidth">
                    <el-upload
                            class="avatar-uploader"
                            action="/commonOSS/upload"
                            name="file"
                            :auto-upload="true"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccessA"
                            :before-upload="beforeAvatarUploadA">
                        <el-input v-if="form.videopath" v-model="form.videopath"></el-input>
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-image v-if="(form.videopath==''||form.videopath==null)?false:true"
                              style="width: 100px; height: 100px"
                              :src="form.videopath">
                    </el-image>
                </el-form-item>
                <el-form-item label="所属课程" :label-width="formLabelWidth" porp="courseid">
                    <el-select v-model="form.courseid" placeholder="-请选择-">
                        <el-option
                                v-for="item in options1"
                                :key="item.courseid"
                                :label="item.coursename"
                                :value="item.courseid">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button v-if="form.videoid==null" type="primary" @click="add()">添 加</el-button>
                <el-button v-else type="primary" @click="update()">修 改</el-button>
            </div>
        </el-dialog>
    </el-row>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{//数据
            tableData:[],
            currentPage:1,
            pageSize:5,
            total:20,
            coursename:null,//搜索框
            editFormVisible:false,//编辑对话框是否显示
            form: {
                videoname:'',
                intro:'',
                courseid:'',
                videopath:'',
                sshotpath:'',
            },//添加或者更新form
            rules: {
                videoname: [
                    {required: true, message: '请输入视频名称', trigger: 'blur'},
                    {min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur'}
                ],
                intro: [
                    {required: true, message: '请填写视频简述', trigger: 'blur'},
                    {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
                ],
                courseid: [
                    { required: true, message: '请选择培训师', trigger: 'change' }
                ],

            },
            formLabelWidth:"120px",
            imageUrl: '',
            courseid:[],
            options1:[]
        },
        created:function () {
            this.loadData();
        },
        methods:{//方法
            //加载数据的方法
            loadData:function () {
                _this =this;
                //初始化数据
                axios.get('/video/page', {
                    params: {
                        pageNo:this.currentPage,
                        pageSize:this.pageSize,
                        videoid:this.videoid,
                        coursename:this.coursename
                    }
                })
                    .then(function (response) {
                        // handle success  处理成功，回调的方法
                        //console.log(response);
                        //赋值分页列表
                        _this.tableData = response.data.page;
                        //删除最后一页为空时，调到上一页
                        //alert(_this.tableData.length);
                        if(_this.tableData.length==0&&_this.currentPage!=1){
                            _this.currentPage=_this.currentPage-1;
                            _this.loadData();
                        }
                        //赋值总条数
                        _this.total = response.data.total;
                    })
                    .catch(function (error) {
                        // handle error 处理异常
                        //console.log(error);
                    })
                    .then(function () {
                        // always executed  总是执行  相当于finally
                    });
            },
            flush(){
                //刷新当前页
                location.reload();
            },
            //每页数量发生变化时
            handleSizeChange:function (v) {
                this.pageSize=v;
                this.loadData();
            },
            //当前页数放生变化是
            handleCurrentChange:function (v) {
                this.currentPage=v;
                this.loadData();
            },
            // 搜索方法
            search:function () {
                this.currentPage=1;
                this.loadData();
            },
            //跳转编辑
            toEdit:function (videoid) {
                this.form={};
                if(videoid > 0){
                    //根据id请求
                    axios.post('/video/list?videoid='+videoid).then(function (response) {
                        _this.form = response.data.list;
                    })
                }else {
                    this.form={
                        videoname:'',
                        intro:'',
                        courseid: '',
                    };
                }
                axios.post('/video/getCourseName ').then(function (response) {
                    _this.options1 = response.data.list;
                })
                this.editFormVisible=true;
            },
            //删除
            handleDelete:function (index,row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post('/video/delete?videoid='+row.videoid).then(function (response) {
                        console.log(response);
                        if(response.status == 200){
                            if(response.data>0) {
                                //提示成功
                                _this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                //重新加载数据
                                _this.loadData();
                            }
                        }
                    }).catch(function (error) {
                        console.log(error);
                        _this.$message.error("你错了。。。");
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //添加
            add:function(){
                _this = this;
                if(vue.form.videoname==''||_this.form.intro==''||_this.form.courseid==''){
                    _this.$message.error("信息未填充完整！");
                    return;
                }
                axios.post('/video/add',this.form).then(function (response) {
                    console.log(response);
                    if(response.status == 200){
                        //提示成功
                        _this.$message({
                            message: '恭喜你，添加成功',
                            type: 'success'
                        });
                        //_this.$message.success("恭喜你，添加成功");
                        //关闭弹出框
                        _this.editFormVisible=false;
                        //重新加载数据
                        _this.loadData();
                        //清空form
                        _this.form={};
                    }
                }).catch(function (error) {
                    console.log(error);
                    _this.$message.error("添加失败");
                });
            },
            //成功上传处理
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.imageUrl=file.response.ossFileUrlBoot;
                this.form.sshotpath=file.response.ossFileUrlBoot;
            },
            handleAvatarSuccessA:function(res, file) {
                //视频回显
                this.$message("上传成功");
                URL.createObjectURL(file.raw);
                this.form.videopath=file.response.ossFileUrlBoot;
            },
            //上传前的处理（判断图片大小）
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isLt2M;
            },
            beforeAvatarUploadA:function(file) {
                const isLt2M = file.size / 1024 / 1024 < 100;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 100MB!');
                }
                return  isLt2M;
            },
            //更新
            update:function(){
                _this = this;
                axios.post('/video/update',this.form).then(function (response) {
                    // console.log(response);
                    if(response.status == 200){
                        //提示成功
                        _this.$message({
                            message: '恭喜你，操作成功',
                            type: 'success'
                        });
                        //关闭弹出框
                        _this.editFormVisible=false;
                        //重新加载数据
                        _this.loadData();
                    }
                }).catch(function (error) {
                    // console.log(error);
                    _this.$message.error("你错了。。。");
                });
            }

        }
    });
</script>
</body>
</html>